<template>
  <div class="attr-container">
    <div class="InfoWrap">
      <div class="goodsDetail">
        <h3 class="InfoName">{{ skuInfo.skuName }}</h3>
        <p class="news">
          {{ skuInfo.skuDesc }}
        </p>
        <div class="priceArea">
          <div class="priceArea1">
            <div class="title">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</div>
            <div class="price">
              <i>¥</i>
              <em>{{ skuInfo.price }}</em>
              <span>降价通知</span>
            </div>
            <div class="remark">
              <i>累计评价</i>
              <em>3333条</em>
            </div>
          </div>
          <div class="priceArea2">
            <div class="title">
              <i>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</i>
            </div>
            <div class="fixWidth">
              <i class="red-bg">加价购</i>
              <em class="t-gray"
                >满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em
              >
            </div>
          </div>
        </div>
        <div class="support">
          <div class="supportArea">
            <div class="title">支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</div>
            <div class="fixWidth">
              以旧换新，闲置手机回收 4G套餐超值抢 礼品购
            </div>
          </div>
          <div class="supportArea">
            <div class="title">配 送 至</div>
            <div class="fixWidth">广东省 深圳市 宝安区</div>
          </div>
        </div>
      </div>

      <div class="choose">
        <div class="chooseArea">
          <div class="choosed"></div>
          <dl v-for="item in shopAttr" :key="item.id">
            <dt class="title">{{ item.saleAttrName }}</dt>
            <dd
              v-for="(item1, index) in item.spuSaleAttrValueList"
              :key="item1.id"
              :class="{ active: item1.isChecked === '1' }"
              @click="changeCheckStatus(item, index)"
            >
              {{ item1.saleAttrValueName }}
            </dd>
          </dl>
        </div>

        <div class="cartWrap">
          <div class="controls">
            <input
              autocomplete="off"
              class="itxt"
              v-model="skuNum"
              @change="handleSkuNumChange"
            />
            <a href="javascript:void(0)" class="plus" @click="skuNum++">+</a>
            <a href="javascript:void(0)" class="mins" @click="onDecrement">-</a>
          </div>
          <div class="add">
            <el-button
              round
              class="reset-el-button"
              @click="onAdd"
              style="width: 104px"
              >加入购物车</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { setItem } from 'utils/storage'
import handleUserInput from 'utils/handleUserInput'
export default {
  name: 'Attr',
  data () {
    return {
      skuNum: 1
    }
  },
  props: {
    shopId: {
      type: [String, Number]
    }
  },
  components: {},
  computed: {
    ...mapGetters('detail', [
      'skuInfo',
      'categoryView',
      'skuImageList',
      'shopAttr'
    ])
  },
  watch: {},
  created () {},
  mounted () {},
  methods: {
    ...mapActions('detail', ['onAddCart']),
    changeCheckStatus (shopAttr, index) {
      shopAttr.spuSaleAttrValueList.forEach((val) => {
        val.isChecked = '0'
      })
      shopAttr.spuSaleAttrValueList[index].isChecked = '1'
    },
    // 点击减号
    onDecrement () {
      if (this.skuNum < 2) {
        this.skuNum = 1
      } else {
        this.skuNum--
      }
    },
    // 输入框change事件
    handleSkuNumChange () {
      this.skuNum = handleUserInput(this.skuNum)
    },
    // 添加购物车
    async onAdd () {
      const { shopId, skuNum } = this
      try {
        await this.onAddCart({
          shopId,
          skuNum
        })
        const goodsAttr = {
          goodsAttr: {}
        }
        // 把属性抽出来准备传到添加购物车成功页面
        this.shopAttr.forEach((val) => {
          const checkedAttr = val.spuSaleAttrValueList.find((element) => {
            return element.isChecked === '1'
          })
          goodsAttr.goodsAttr[checkedAttr.saleAttrName] =
            checkedAttr.saleAttrValueName
        })
        const goodsName = {
          name: this.skuInfo.skuName
        }
        // 合并对象
        const mergeAttr = Object.assign(
          { skuImg: this.skuInfo.skuDefaultImg },
          goodsAttr,
          goodsName
        )
        // 封装好的本地存储函数
        setItem('mergeAttr', mergeAttr)
        this.$message.success('添加购物车成功')
        this.$router.push({
          name: 'AddCartSuccess',
          query: {
            skuNum: this.skuNum,
            id: this.skuInfo.id
          }
        })
      } catch (error) {
        this.$message.error('添加购物车失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.attr-container {
  .InfoWrap {
    width: 700px;
    float: right;
    .InfoName {
      font-size: 14px;
      line-height: 21px;
      margin-top: 15px;
    }
    .news {
      color: #e12228;
      margin-top: 15px;
    }
    .priceArea {
      background: #fee9eb;
      padding: 7px;
      margin: 13px 0;
      .priceArea1 {
        overflow: hidden;
        line-height: 28px;
        margin-top: 10px;
        .title {
          float: left;
          margin-right: 15px;
        }
        .price {
          float: left;
          color: #c81623;
          i {
            font-size: 16px;
          }
          em {
            font-size: 24px;
            font-weight: 700;
          }
          span {
            font-size: 12px;
          }
        }
        .remark {
          float: right;
        }
      }
      .priceArea2 {
        overflow: hidden;
        line-height: 28px;
        margin-top: 10px;
        .title {
          margin-right: 15px;
          float: left;
        }
        .fixWidth {
          width: 520px;
          float: left;
          .red-bg {
            background: #c81623;
            color: #fff;
            padding: 3px;
          }
          .t-gray {
            color: #999;
          }
        }
      }
    }
    .support {
      border-bottom: 1px solid #ededed;
      padding-bottom: 5px;
      .supportArea {
        overflow: hidden;
        line-height: 28px;
        margin-top: 10px;
        .title {
          margin-right: 15px;
          float: left;
        }
        .fixWidth {
          width: 520px;
          float: left;
          color: #999;
        }
      }
    }
    .choose {
      .chooseArea {
        overflow: hidden;
        line-height: 28px;
        margin-top: 10px;
        .choosed {
          mark {
            height: 30px;
            display: inline-block;
            line-height: 30px;
            background-color: snow;
            border: 1px solid #ddd;
            padding: 0 20px;
            margin-right: 20px;
            a {
              font-size: 12px;
              color: red;
              margin-left: 20px;
              cursor: pointer;
            }
          }
        }
        dl {
          overflow: hidden;
          margin: 13px 0;
          dt {
            margin-right: 15px;
            float: left;
          }
          dd {
            float: left;
            margin-right: 5px;
            color: #666;
            line-height: 24px;
            padding: 2px 14px;
            border-top: 1px solid #eee;
            border-right: 1px solid #bbb;
            border-bottom: 1px solid #bbb;
            border-left: 1px solid #eee;
            cursor: pointer;
            &.active {
              color: green;
              background: skyblue;
            }
          }
        }
      }
      .cartWrap {
        .controls {
          width: 48px;
          position: relative;
          float: left;
          margin-right: 15px;
          .itxt {
            width: 38px;
            height: 37px;
            border: 1px solid #ddd;
            color: #555;
            float: left;
            border-right: 0;
            text-align: center;
          }
          .plus,
          .mins {
            width: 15px;
            text-align: center;
            height: 17px;
            line-height: 17px;
            background: #f1f1f1;
            color: #666;
            position: absolute;
            right: -8px;
            border: 1px solid #ccc;
          }
          .mins {
            right: -8px;
            top: 19px;
            border-top: 0;
          }
          .plus {
            right: -8px;
          }
        }
        .add {
          float: left;
          .el-button {
            background-color: #e1251b;
            padding: 0 25px;
            font-size: 16px;
            color: #fff;
            height: 36px;
            line-height: 36px;
            display: block;
          }
        }
      }
    }
  }
}
</style>
